<!DOCTYPE html>
<html>
{include file="public/header" /}

<style>
    table {
        table-layout: fixed;
        width: 100%;
    }

    td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<body>


<div class="layui-fluid" id="app" style="margin-top: 0px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">轮播图</li>
                    <li>添加图片</li>

                </ul>
                <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">

                    <div class="layui-tab-item layui-show">

                        <!--<div>-->
                        <!--<div class="layui-btn-group">-->
                        <!--&lt;!&ndash;<button class="layui-btn ">推荐</button>&ndash;&gt;-->
                        <!--<button class="layui-btn " onclick="getCheckBox();">批量操作1</button>-->
                        <!--<button class="layui-btn" >批量操作1</button>-->
                        <!--</div>-->
                        <!--</div>-->

                        <div class="layadmin-trailer ">


                            <table class="layui-table" lay-skin="line">


                                <thead>
                                <tr>
                                    <!--<th>#ID</th>-->
                                    <th style="width: 20%">标题</th>
                                    <th style="width: 40%">链接</th>
                                    <!--&lt;!&ndash;<th>创建时间</th>&ndash;&gt;-->
                                    <th>缩略图</th>
                                    <!--<th>参数</th>-->
                                    <!--<th>状态</th>-->
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in items" :data_id="item.id">
                                    <td>{{item.title}}</td>
                                    <td>{{item.url}}</td>
                                    <td>
                                        <img style="width: auto;height: 60px;"
                                             :src="item.src">
                                        <!--{{item.src}}-->

                                    </td>
                                    <td>

                                        <div class="layui-btn-group">
                                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                    onclick="del(this)" :data_id="item.id" :data_index="index">
                                                删除
                                            </button>

                                        </div>

                                    </td>
                                </tr>

                                </tbody>
                            </table>


                        </div>


                    </div>

                    <div class="layui-tab-item ">

                        <form class="layui-form" action="" lay-filter="component-form-group">
                            <!--<div class="layui-card-header">表单组合</div>-->


                            <input type="hidden" name="slide_id" value="{$id}">
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" lay-verify="required"
                                           autocomplete="off"
                                           placeholder="请输入"
                                           class="layui-input">
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <label class="layui-form-label">链接</label>
                                <div class="layui-input-block">
                                    <input type="text" name="url" lay-verify="required"
                                           id="url"
                                           autocomplete="off"
                                           placeholder="请输入"
                                           class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <span class="layui-btn layui-btn-primary layui-btn-sm" onclick="art()">从文章中选择</span>
                                    <span class="layui-btn layui-btn-primary layui-btn-sm"
                                          onclick="cases()">从案例中选择</span>
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <label class="layui-form-label">图片</label>

                                <div class="layui-input-inline " style="width: auto;">

                                    <div class="layui-upload-drag" id="pic1" style="padding: 2px">
                                        <img class="layui-upload-img"
                                             style="width: auto;height: 120px; object-fit: cover;"
                                             src="/res/img/thumb.png">
                                        <input type="hidden" id="src" name="src" value=""
                                               lay-verify="required">
                                    </div>
                                     &nbsp;推荐使用4:6的图片


                                    <!--<div class="layui-btn layui-btn-primary" id="test10">-->
                                    <!--<i class="layui-icon">点击上传</i>-->
                                    <!--&lt;!&ndash;<p>点击上传</p>&ndash;&gt;-->
                                    <!--</div>-->


                                </div>
                            </div>

                            <div class="layui-form-item form-footer2">
                                <div class="layui-input-block">
                                    <div class="layui-footer">
                                        <button class="layui-btn" lay-submit=""
                                                lay-filter="component-form-demo1">立即提交
                                        </button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </form>

                    </div>


                </div>
            </div>


        </div>


    </div>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //vue对象
    var app = new Vue({
        el: '#app',
        data: {
            check: [],
            curr: 1,//当前页
            limit: 10,//当前页
            items: []
        }
    });

    //初始数据
    function init() {
        layer.load(2);
        $.get('/admin/slide/detail', {id: '{$id}'},
            function (res) {
                layer.closeAll();
                app.items = res.data;
            }
        );
    }


    function set_url(url) {
        $('#url').val(url)
    }


    function art() {

        layer.open({
            type: 2,
            title: '选择文章',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('article/li')}" //iframe的url

        })

    }


    function cases() {

        layer.open({
            type: 2,
            title: '选择案例',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('cases/li')}" //iframe的url

        })

    }


    function del(that) {
        var id = $(that).attr('data_id');
        var index = parent.layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("pic_del")}', {id: id}, function (res) {
                parent.layer.close(index);
                if (res.code == 1) {
                    init();
                }

            });
        }, function () {
            parent.layer.close(index);
        });
    }


    //按需引入layui模块
    layui.use(['laypage', 'layer', 'table', 'element', 'upload'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
//        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;
        element.on('tab(docDemoTabBrief)', function (data) {
//            console.log(this); //当前Tab标题所在的原始DOM元素
//            console.log(data.index); //得到当前Tab的所在下标
//            console.log(data.elem); //得到当前的Tab大容器
//            if (data.index == 0) {
//                init();
//            }
        });

        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {

            $.post("{:url('pic_add')}", data.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    $('.layui-form')[0].reset();
                    $('.layui-upload-img').attr('src', '/res/img/thumb.png');
                    $('#src').val('');
                    init();
                    return false;
                } else {
                    layer.msg(res.msg, {icon: 2})
                    return false;
                }
            });


            return false;
        });

        //拖拽上传
        upload.render({
            elem: '#pic1'
            , url: '/tool/qiniu/upload'
            , before: function () {
                layer.load(2);
            }
            , done: function (res) {
                layer.closeAll();
                console.log(res)
                $('#pic1 img').attr('src', res.data.url);
                $('#pic1 input').val(res.data.pic);
            }
        });


        init();


    });


</script>


</body>
</html>




